import React from 'react';
import {inject, observer} from 'mobx-react';
// import DevTools from 'mobx-react-devtools'
import { Button, Row, Col } from 'antd';
import { WeaTop,WeaRightMenu, WeaTab, WeaSearchGroup, WeaInput, WeaSelect, WeaBrowser, WeaAvatar } from 'ecCom';
import { WeaSwitch } from 'comsMobx'
import { Form } from 'antd';
import WorkPlanExchangeStore from "../../stores/WorkPlanExchange/WorkPlanExchangeStore";
import {WeaLocaleProvider} from 'ecCom';
import { toJS } from 'mobx';
const getLabel = WeaLocaleProvider.getLabel;

@inject('workPlanExchangeStore')
@observer
class PerExchange extends React.Component {
    //element格式如下：
    // {
           //与当前交流创建人的一些相关信息的一个对象
    //     creater: {id: "1", name: "", imgurl: "/messager/images/icon_m_wev8.jpg"}
    //     id: "1"
    //     remark: "<p>1234</p>"  //当前交流的评论文本内容
    //     time: "2017-11-07 11:19:22" //当前交流的评论时间
    // }
    static propTypes = {
        element: React.PropTypes.object.isRequired
    };



    render() {
        const { element,  workPlanExchangeStore} = this.props;
        let browserParam = {
            hasAddBtn:false,
            hasAdvanceSerach:true,
            idSeparator:",",
            isAutoComplete:1,
            isDetail:0,
            isMultCheckbox:false,
            isSingle:true,
            linkUrl:"/hrm/resource/HrmResource.jsp?id=",
            pageSize:10,
            quickSearchName:"",
            title:`${getLabel(179,'人力资源')}`,
            type:"1",
            viewAttr:1,
        };
        let replaceDatas = [element.creater];
        let elementCreate = toJS(element.creater);
        const avatarStyle = {
            width: 40,
            height: 40,
            display: "inline-block",
            borderRadius: 20
          };
        return (
            <div style = {{borderBottom:'1px solid #E2E2E2',padding:"10px 18px 10px 24px",backgroundColor:'#ffffff'}}>

                <div>
                    <div style={{float: 'left', height: 54, marginRight: 9, }}>
                        {
                            elementCreate && elementCreate.id ? <span style={avatarStyle}>
                                <WeaAvatar ecId={`${this && this.props && this.props.ecId || ''}_WeaAvatar@lpw4w8`} // url加载失败显示默认处理
                                    userId={elementCreate.id}
                                />
                            </span>
                            : 
                            <img src={`${element.creater.imgurl}`} style={{ height:'40px',width:'40px',borderRadius:'20px'}} />
                        }
                    </div>

                    <div style={{display: 'block', overflow: 'hidden', }}>

                        <div style={{marginBottom:'6px',}}>
                            <div style={{display:'inline-block', verticalAlign: 'middle', }}>
                                {/*<WeaBrowser {...browserParam} replaceDatas={replaceDatas} />*/}
                                <a
                                    href={`javaScript:openhrm(${element.creater.id});`}
                                    onClick={(event) => {
                                        window.pointerXY(event);
                                    }}
                                    title={element.creater.name}
                                >
                                    {element.creater.name}
                                </a>
                            </div>
                            <div style={{display:'inline-block', /*fontSize: 12,*/ lineHeight: '14px', verticalAlign: 'middle',}}>
                                <span style={{padding: '0 8px 0 10px', color: '#999999', }}>{getLabel(83466,'日程')}:</span>
                                <a
                                    // style={{color: '#4D7AD8', cursor: 'pointer'}}
                                    onClick={() => {
                                        workPlanExchangeStore.setActiveKey('1');
                                        workPlanExchangeStore.setWorkPlanId(element.workplanid);
                                        workPlanExchangeStore.openCreateWP();
                                    }}
                                >
                                    {element.workplanname}
                                </a>
                            </div>
                        </div>

                        {
                            <div dangerouslySetInnerHTML={{__html:element.remark}} />
                        }

                        {
                            element.projectids.length>0?
                                element.projectids.map((e,_index)=>{//相关项目
                                    return <div style={{ marginTop: 6}}>
                                        <span>{getLabel(782,'相关项目')}：</span>
                                        <span className="icon-blog-Project" style={{paddingRight:'5px'}}/>
                                        <a href='javascript:void(0)'  linkid={e.id} linkType='workflow'
                                           onClick={()=> openWorkplanAppLink('project',e.id,element.workplanid)} ondblclick={()=> false}
                                           unselectable='off' contenteditable='false' style={{cursor:'pointer',textDecoration:'underline !important',marginRight:'8px'}}>{e.name} </a>
                                    </div>
                                }):''
                        }
                        {
                            element.relatedcus.length>0?
                                element.relatedcus.map((e,_index)=>{//客户
                                    return <div style={{ marginTop: 6}}>
                                        <span>{getLabel(783,'相关客户')}：</span>
                                        <span className="icon-blog-Personnel" style={{paddingRight:'5px'}}/>
                                        <a href='javascript:void(0)'  linkid={e.id} linkType='workflow'
                                           onClick={()=> openWorkplanAppLink('crm',e.id,element.workplanid)} ondblclick={()=> false}
                                           unselectable='off' contenteditable='false' style={{cursor:'pointer',textDecoration:'underline !important',marginRight:'8px'}}>{e.name} </a>
                                    </div>
                                }):''
                        }
                        {
                            element.relateddoc.length>0?
                                element.relateddoc.map((e,_index)=>{//修改成附件
                                    if(e.showLoad){
                                        return <div style={{ marginTop: 6}}>
                                            <span>{getLabel(22194,'相关附件')}：</span>
                                            <span className="icon-blog-Enclosure" style={{paddingRight:'5px'}}/>
                                            <a onClick={()=>openWorkplanDiscussDoc(this,e.fileid,element.workplanid)} href='javascript:void(0);'
                                               unselectable='off' contenteditable='false' style={{cursor:'pointer',textDecoration:'underline !important',marginRight:'8px'}}>{e.filename}</a>
                                            <a unselectable='off' contenteditable='false' href={e.loadlink} target='_blank'
                                                style={{cursor:'pointer',textDecoration:'underline !important',marginRight:'8px'}}>{getLabel(258,"下载")}({e.filesize})</a>
                                        </div>
                                    }else{
                                        return <div>
                                            <span className="icon-blog-Enclosure" style={{paddingRight:'5px'}}/>
                                            <a onClick={()=>openWorkplanDiscussDoc(this,e.fileid,element.workplanid)} href='javascript:void(0);'
                                               unselectable='off' contenteditable='false' style={{cursor:'pointer',textDecoration:'underline !important',marginRight:'8px'}}>{e.filename}</a>
                                        </div>
                                    }
                                }):''
                        }

                        {
                            element.relatedwf.length>0?
                                element.relatedwf.map((e,_index)=>{//流程
                                    return <div style={{ marginTop: 6}}>
                                        <span>{getLabel(22105,'相关流程')}：</span>
                                        <span className="icon-blog-Process" style={{paddingRight:'5px'}}/>
                                        <a href='javascript:void(0)'  linkid={e.id} linkType='workflow'
                                           onClick={()=> openWorkplanAppLink('workflow',e.id,element.workplanid)} ondblclick={()=> false}
                                           unselectable='off' contenteditable='false' style={{cursor:'pointer',textDecoration:'underline !important',marginRight:'8px'}}>{e.name} </a>
                                    </div>
                                }):''
                        }
                        {
                            element.docids.length>0?
                                element.docids.map((e,_index)=>{//文档
                                    return <div style={{ marginTop: 6}}>
                                        <span>{getLabel(857,'相关文档')}：</span>
                                        <span className="icon-blog-Document" style={{paddingRight:'5px'}}/>
                                        <a href='javascript:void(0)'  linkid={e.id} linkType='workflow'
                                           onClick={()=> openWorkplanAppLink('doc',e.id,element.workplanid)} ondblclick={()=> false}
                                           unselectable='off' contenteditable='false' style={{cursor:'pointer',textDecoration:'underline !important',marginRight:'8px'}}>{e.name} </a>
                                    </div>
                                }):''
                        }

                        <div style={{overflow: 'hidden', marginTop: 10, }}>
                            <div style={{float: 'left',  color: '#999999', }}>{element.time}</div>

                            <div style={{float: 'right', }}>
                                <span
                                    className="wea-mbwcbr-item icon-coms-New-SMS"
                                    style = {{
                                        // float: 'right',
                                        cursor:'pointer',
                                        paddingLeft:'30px',
                                        color: '#7D7D7D',
                                    }}
                                    onClick={() => {
                                        workPlanExchangeStore.setActiveKey('7');
                                        workPlanExchangeStore.setWorkPlanId(element.workplanid);
                                        workPlanExchangeStore.openCreateWP();
                                    }}
                                >
                                    <span
                                        style={{
                                            "font-family": ".PingFangSC-Regular",
                                            /* "font-size": "12px",*/
                                            "color": "#999999",
                                            "letter-spacing": "-0.07px",
                                        }}
                                    >
                                        &nbsp;{getLabel(15153,'相关交流')}
                                    </span>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default PerExchange;